<template>
  <el-container style="height: 100%">
    <el-main>
      <el-row>
        <el-col :span="20">
          <el-button type="primary" @click="router.push('/publicAccountManager/tuwen')">创建单图文消息</el-button>
          <el-button type="primary" @click="router.push('/publicAccountManager/duotuwen')">创建多图文消息</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="primary">切换视图</el-button>
        </el-col>
      </el-row>

      　
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column type="index" label="序号" width="180"/>
        <el-table-column prop="title" label="名称" width="180"/>
        <el-table-column prop="creationTime" label="创建时间" width="180"/>
        <el-table-column prop="type" label="图文类型" width="180">
          <template #default="scope">
            {{scope.row.type ===0?'单图文':'多图文'}}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template #default="scope">
            <el-button
                type="text"
                icon="Edit"
                @click="handleUpdate(scope.row)"
            >修改
            </el-button>
            <el-button
                type="text"
                icon="user"
                @click="deleteItem(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-div">
        <el-pagination
            v-show="total>0"
            v-model:currentPage="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            :page-sizes="[10,20,30,50]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-main>
    <el-aside width="260px">
      <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="vertical"
          @select="handleSelect"
      >
        <el-menu-item index="1">图片</el-menu-item>
        <el-menu-item index="2">音频</el-menu-item>
        <el-menu-item index="3">视频</el-menu-item>
        <el-menu-item index="4">图文</el-menu-item>
        <el-menu-item index="5">文档</el-menu-item>
      </el-menu>
    </el-aside>
  </el-container>
</template>

<script lang="ts" setup name="sucai">
import {ArrowRight} from '@element-plus/icons-vue'
import {listImagetext,delImagetext} from '/@/api/publicaccount/imagetext'
import {onMounted, reactive, ref} from "vue";
import usePublicAccount from '/@/stores/modules/publicaccount'
import {useRouter} from "vue-router";

const publicAccount = usePublicAccount();
const total = ref(0);
const loading = ref(true);
const activeIndex = ref('4')
const tableData = ref([]);
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  pusername: publicAccount.selectid,
  suborder: 0,
  status: 1
});

function getList() {
  loading.value = true;
  listImagetext(queryParams).then(response => {
    tableData.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

onMounted(() => {
  getList();
})
const router = useRouter();
const handleUpdate = (item) => {
  if(item.type===0) {
    router.push('/publicAccountManager/tuwen?id=' + item.id);
  }else{
    router.push('/publicAccountManager/duotuwen?pid=' + item.pid);
  }
}


const deleteItem = (item) => {
  delImagetext(item.pid).then(resp =>{
    console.info("resp",resp);
    getList();
  })

}

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const handleSizeChange = (val: number) => {
  getList()
}
const handleCurrentChange = (val: number) => {
  getList()
}


const small = ref(false)
const background = ref(false)
const disabled = ref(false)
</script>

<style scoped lang="scss">
.page-div {
  margin-top: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
